<template>
  <div class="pnerigh">
    <div class="pan_ria">
      <div class="pan_rig_top">
        <div class="pan_rig_to_zi">
          <label class="pan_rig_to_zi" @click="Deal()">
            &nbsp;
            <input checked type="radio" name="typeliang" value="1" />
            成交明细&nbsp;
          </label>
          <label class="pan_rig_to_zi" @click="contract()">
            <input type="radio" name="typeliang" value="3" />
            按合约汇总&nbsp;
          </label>
        </div>
      </div>
      <div class="data_lst">
        <div class="data_title">
          <div class="title_one" style="width: 160px;">成交时间</div>
          <div class="title_one" style="width: 145px;">合约</div>
          <div class="title_one" style="width: 48px;">买卖</div>
          <div class="title_one" style="width: 64px;">开平</div>
          <div class="title_one" style="width: 145px;">成交价格</div>
          <div class="title_one" style="width: 145px;">浮动盈亏</div>
          <div class="title_one" style="width: 95px;">手数</div>
          <div class="title_one" style="width: 145px;">名称</div>
          <div class="title_one" style="width: 145px;">成交号</div>
        </div>
        <div class="data_info">
          <div :class="activeClass3 == index ? 'activess' : ''" class="data_title_one" v-for="(item, index) in Deallist" :key="index" @click="getchengjiao(item, index)">
            <div class="title_sone" style="width: 160px">{{ item.open }}</div>
            <div class="title_sone" style="width: 145px;">{{ (optionlist[item.code] && optionlist[item.code]['name_code']) || '- -' }}</div>
            <div :class="item.rise_fall == 'RISE' ? 'title_red' : 'title_green'" class="title_sone" style="width: 48px;">{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</div>
            <div class="title_sone" style="width: 64px;">{{ item.state == '平仓' ? '平仓' : '开仓' }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.state == '平仓' ? parseFloat(item.close_price || 0) : parseFloat(item.open_price || 0) }}</div>
            <div class="title_sone" style="width: 145px;">
              {{
                item.state == '平仓'
                  ? parseFloat(item.profit).toFixed(2)
                  : Number((ticket[item.symbol] && ticket[item.symbol].price) || 0) == 0
                  ? '- -'
                  : item.rise_fall == 'RISE'
                  ? (
                      (parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0) - parseFloat(item.open_price || 0)) *
                      parseFloat(item.symbol_detail['unit_price'] || 0) *
                      parseFloat(item.volume || 0)
                    ).toFixed(2)
                  : (
                      (parseFloat(item.open_price || 0) - parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0)) *
                      parseFloat(item.symbol_detail['unit_price'] || 0) *
                      parseFloat(item.volume || 0)
                    ).toFixed(2)
              }}
            </div>
            <div class="title_sone" style="width: 95px;">{{ item.volume }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.symbol_cn }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.order_number }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  data() {
    return {
      activeClass3: -1,
      Deallist: []
    };
  },
  mounted() {
    this.Deal();
  },
  methods: {
    getchengjiao(item, index) {
      this.activeClass3 = index;
    },
    //按合约
    contract() {
      this.$get('addons/tf-futures/order/olist?type=1').then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.Deallist = res.data;
        } else {
          console.log(res.message || '暂无信息');
          // this.$notify.error('暂无信息！');
        }
      });
    },
    //成交
    Deal() {
      this.$get('addons/tf-futures/order/olist').then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.Deallist = res.data;
        } else {
          console.log(res.message || '暂无信息');
        }
      });
    }
  }
};
</script>

<style scoped>
.pnerigh {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
/*当日成交*/
.pan_ria {
  width: 100%;
  height: 100%;
}
/* 头部按钮开始 */
.pan_rig_top {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 8px;
  box-sizing: border-box;
}

.pan_rig_to_zi {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 头部按钮结束 */

/* 下方表格 */
.data_lst {
  width: 100%;
  height: calc(100% - 25px);
  overflow-x: auto;
  overflow-y: hidden;
}
/* 表格头部 */
.data_title {
  height: 28px;
  margin-top: 2px;
  border-top: #7f9db9 solid 1px;
  border-bottom: #7f9db9 solid 1px;
  width: 200%;
}

.title_one {
  height: 28px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
  border-right: #7f9db9 solid 1px;
  color: #000000;
}

/* 表格内容盒子 */
.data_info {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: calc(100% - 30px);
  box-sizing: border-box;
  padding-bottom: 20px;
  width: 200%;
}

/* 表格内容 */
.data_title_one {
  height: 28px;
  width: 100%;
}
.title_sone {
  color: #000000;
  height: 25px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/*持仓*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}
</style>
